<template>
  <el-container class="invoice-view">
    <el-header
      class="invoice-view-header"
      :height="'245px'">
      <div class="common-invoice-ui common-bottom-border">
        发票影像
      </div>
      <!-- <div style="margin-top:20px;"> -->
      <upload-img
        :src="invoiceUrl"
        :disabled="disabled"
        :invoice-no="invoiceNo"
      />
      <!-- </div> -->

    </el-header>
    <el-container>
      <el-header
        style="height: auto; padding: 0;">
        <div class="common-invoice-ui common-bottom-border">
          发票详情
        </div>
      </el-header>
      <el-row class="common-invoice-ui invoice-code">
        <el-col :span="8">
          <div class="invoice-view__pic">
            <img
              v-show="qrcodeImg"
              :src="qrcodeImg"
              width="70px"
              alt="编号">
            <div><span class="invoice-color-red">机器编码：</span>{{ invoiceInfo.machineNo || '' }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="invoice-view__pic">
            <div class=" invoice-view__title">
              {{ invoiceInfo.invoiceKindName }}
              <el-divider/>
              <el-divider/>
            </div>
          </div>
        </el-col>
        <el-col
          :span="6"
          :offset="2">
          <el-row class="invoice-view__base">
            <el-col :span="12">
              <div class="invoice-view-left invoice-color-red">发票代码：</div>
            </el-col>
            <el-col :span="12">
              <div class="invoice-view-right">{{ invoiceInfo.invoiceCode }}</div>
            </el-col>
          </el-row>
          <el-row class="invoice-view__base">
            <el-col :span="12">
              <div class="invoice-view-left invoice-color-red">发票号码：</div>
            </el-col>
            <el-col :span="12">
              <div class="invoice-view-right">{{ invoiceInfo.invoiceNo }}</div>
            </el-col>
          </el-row>
          <el-row class="invoice-view__base">
            <el-col :span="12">
              <div class="invoice-view-left invoice-color-red">开票日期：</div>
            </el-col>
            <el-col :span="12">
              <div class="invoice-view-right">{{ invoiceInfo.invoiceDate.substring(0, 4) }}<span class="invoice-color-red">年</span>{{ invoiceInfo.invoiceDate.substring(4, 6) }}<span class="invoice-color-red">月</span>{{ invoiceInfo.invoiceDate.substring(6) }}<span class="invoice-color-red">日</span></div>
            </el-col>
          </el-row>
          <el-row class="invoice-view__base">
            <el-col :span="12">
              <div class="invoice-view-left invoice-color-red">校  验  码：</div>
            </el-col>
            <el-col :span="12">
              <div class="invoice-view-right">{{ invoiceInfo.checkCode }}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="common-table">
        <!-- 购货单位 -->
        <el-editable
          v-loading="submitLoading"
          :data="invoiceHeaders"
          :highlight-current-row="false"
          :span-method="arraySpanMethod"
          :show-header="false"
          :cell-class-name="cellClassNamebase"
          :columns="invoiceHeaderColumns"
        />
        <!-- 货物清单 -->
        <el-editable
          v-loading="submitLoading"
          class="not-header-table"
          :height="300"
          :data="invoiceDetailList"
          :span-method="arraySpanMethodDetail"
          :highlight-current-row="false"
          :cell-class-name="cellClassNameDetail"
          :columns="invoiceDetailColumns"
        />
        <!-- 合计 -->
        <el-editable
          v-loading="submitLoading"
          class="not-header-table"
          :data="invoiceTotals"
          :show-header="false"
          :highlight-current-row="false"
          cell-class-name="invoice-table-cell-left"
          :columns="invoiceTotalColumns"
        />
        <!-- 销货单位 -->
        <el-editable
          v-loading="submitLoading"
          class="not-header-table"
          :data="invoiceFooters"
          :highlight-current-row="false"
          :span-method="arraySpanMethod"
          :show-header="false"
          :cell-class-name="cellClassNamebase"
          :columns="invoiceFooterColumns"
        />
        <el-row>
          <el-col
            :span="6"
            v-for="(item, index) in infoFootersColumns"
            :key="index">
            <el-row>
              <el-col :span="6">
                <div class="invoice-footer-label">{{ item.label }}</div>
              </el-col>
              <el-col :span="18">
                <div class="invoice-footer-value">
                  {{ infoFooters[item.prop] || '-' }}
                  <el-divider/>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-row>
    </el-container>
  </el-container>
</template>

<script>
import {
  querySettleInvoiceInfo // 配送商/医院-后结算-发票结构化数据
} from '@const/beforeSettleApi'
import { invoiceFooterColumns, invoiceHeaderColumns, invoiceDetailColumns, invoiceTotalColumns, infoFootersColumns } from './const'
import QRCode from 'qrcode'
import ElEditable from '@components/el-editable'
import UploadImg from '@/moduleComponents/beforeSettle/common/upload-img.vue'
import { hasIn } from 'lodash'
export default {
  name: 'InvoiceView',
  components: { ElEditable, UploadImg },
  props: {
    requstUrl: {
      type: String,
      default: querySettleInvoiceInfo
    },
    invoiceNo: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      submitLoading: false,
      qrcodeImg: null,
      invoiceUrl: '',
      invoiceInfo: {
        checkCode: '',
        invoiceCode: '',
        invoiceDate: '',
        invoiceNo: ''
      },
      invoiceHeaders: [
        {
          part: '购货单位',
          baseKey: `名          称：`,
          baseValue: '',
          areaKey: '密码区',
          areaValue: ''
        },
        {
          baseKey: '纳税人识别号：',
          baseValue: ''
        },
        {
          baseKey: '地址、电话：',
          baseValue: ''
        },
        {
          baseKey: '开户行及帐号：',
          baseValue: ''
        }
      ],
      invoiceFooters: [
        {
          part: '购货单位',
          baseKey: '名             称：',
          baseValue: '',
          areaKey: '备注',
          areaValue: ''
        },
        {
          baseKey: '纳税人识别号：',
          baseValue: ''
        },
        {
          baseKey: '地址、电话：',
          baseValue: ''
        },
        {
          baseKey: '开户行及帐号：',
          baseValue: ''
        }
      ],
      invoiceDetailList: [],
      infoFooters: {},
      invoiceTotals: [
        {
          smallKey: '（小写）',
          smallValue: '',
          bigKey: '价税合计（大写）：',
          bigValue: ''
        }
      ],
      invoiceDetailColumns,
      invoiceFooterColumns,
      invoiceTotalColumns,
      invoiceHeaderColumns,
      infoFootersColumns
    }
  },
  mounted () {
    this.getCode()
    this.getInvoiceData()
  },
  methods: {
    // 获取列表数据
    getInvoiceData () {
      let data = {
        busnessType: 1, // 业务类型（收付款：1）
        invoiceNo: this.invoiceNo
      }
      this.$axios({
        method: 'post',
        url: this.requstUrl,
        data: data
      })
        .then(res => {
          const { invoiceUrl, detailLines, qrcodeStr, ...baseInfo } = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          // 发票五要素、机器编码及发票类型
          const { checkCode = '', invoiceCode = '', invoiceDate = '', invoiceNo = '', invoiceKindName = '', machineNo = '' } = baseInfo
          this.invoiceInfo = { checkCode, invoiceCode, invoiceDate, invoiceNo, invoiceKindName, machineNo }

          // 发票详情
          const { totalTax, amountNoTax } = baseInfo
          const invoiceDetailList = (detailLines || [])
          for (let i = 0; i < 8; i++) {
            invoiceDetailList[i] = invoiceDetailList[i] || {}
          }
          const totalData = {
            first: '合计',
            amount: 0,
            taxAmount: 0
          }
          totalData.amount = amountNoTax
          totalData.taxAmount = totalTax

          this.invoiceDetailList = invoiceDetailList.concat(totalData)

          // 影像以及发票二维码
          this.invoiceUrl = invoiceUrl || ''
          this.getCode(qrcodeStr)

          // 购货单位
          const { buyCompany, invoiceCipher, buyRegistrationCode, buyAddressTel, buyBankAccount } = baseInfo
          this.invoiceHeaders[0].baseValue = buyCompany
          this.invoiceHeaders[0].areaValue = invoiceCipher
          this.invoiceHeaders[1].baseValue = buyRegistrationCode
          this.invoiceHeaders[2].baseValue = buyAddressTel
          this.invoiceHeaders[3].baseValue = buyBankAccount
          // 开票单位
          const { saleCompany, remark, saleRegistrationCode, saleAddressTel, saleBankAccount } = baseInfo
          this.invoiceFooters[0].baseValue = saleCompany
          this.invoiceFooters[0].areaValue = remark
          this.invoiceFooters[1].baseValue = saleRegistrationCode
          this.invoiceFooters[2].baseValue = saleAddressTel
          this.invoiceFooters[3].baseValue = saleBankAccount
          // 大小写合计
          const { totalPriceTax, upperTotalPriceTax } = baseInfo
          this.invoiceTotals[0].smallValue = totalPriceTax
          this.invoiceTotals[0].bigValue = upperTotalPriceTax

          // 底部信息
          const { payee, reviewer, drawer } = baseInfo
          this.infoFooters = { payee, reviewer, drawer, saleCompany }
        })
        .catch(err => {
          console.log(err)
          const invoiceDetailList = []
          for (let i = 0; i < 8; i++) {
            invoiceDetailList[i] = {}
          }
          this.invoiceDetailList = invoiceDetailList
        })
        .finally(() => {})
    },
    // 返回数组方法合并单元格
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if ([0, 3, 4].includes(columnIndex)) {
        if (rowIndex === 0) {
          return [4, 1]
        }
        return [0, 0]
      }
    },
    // 返回数组方法合并单元格
    arraySpanMethodDetail ({ row, column, rowIndex, columnIndex }) {
      if (row.first === '合计') {
        if (columnIndex === 0) {
          return [1, 2]
        }
        if (columnIndex === 1) { return [0, 0] }
      }
    },
    // 返回cell的class
    cellClassNamebase ({ row, column, rowIndex, columnIndex }) {
      if ([0, 3].includes(columnIndex)) {
        return 'invoice-table-cell-rl'
      }
      if ([1].includes(columnIndex)) {
        return 'invoice-table-cell'
      }
      if ([2, 4].includes(columnIndex)) {
        return 'invoice-table-cell-left'
      }
    },
    // 返回cell的class
    cellClassNameDetail ({ row, column, rowIndex, columnIndex }) {
      if (row.first === '合计') {
        return ''
      }
      return 'invoice-table-cell'
    },
    // 生成二位码
    getCode (str = '12345') {
      QRCode.toDataURL(str)
        .then(url => {
          this.qrcodeImg = url
        })
        .catch(() => {
          this.$message({ type: 'error', message: '生成二维码失败，建议使用本地上传！' })
        })
    }
  }
}
</script>

<style lang="less" scoped>
.invoice-view {
  height: 100%;
  .invoice-view-header {
    padding: 0;
    margin-bottom: 8px;
    background: #fff;
  }
  .common-invoice-ui {
    padding: 8px;
    background: #fff;
  }
  .common-table {
    padding: 0 8px;
    background: #fff;
  }
  .common-bottom-border {
    border-bottom: solid 1px #e9e9e9;
  }
  .invoice-view__pic {
    text-align: center;
    height: 100px;
    padding-top: 1px;
    .el-divider.el-divider--horizontal {
      margin: 2px 0;
      background-color: #b16666;
    }
  }
  .invoice-view__pic .invoice-view__title {
    // font-family: STSongti-SC-Regular;
    font-size: 28px;
    color: #333;
    display: inline-block;
    letter-spacing: 1.05px;
    text-align: center;
    line-height: 28px;
    width: 120px;
    margin-top: 50px;
  }
  /deep/.invoice-table-cell {
    border-right: 1px solid #b16666;
    border-bottom: 1px solid #b16666;
    padding: 0;
    text-align: center;
    height: 30px;
  }
  /deep/.invoice-table-cell-rl {
    border-right: 1px solid #b16666;
    border-bottom: 1px solid #b16666;
    padding: 0;
    height: 30px;
    & > .cell {
      width: 40px;
      margin: auto;
    }
  }
  /deep/.invoice-table-cell-left {
    border-right: 1px solid #b16666;
    border-bottom: 1px solid #b16666;
    padding: 0;
    text-align: left;
    height: 30px;
  }
  .not-header-table.el-table {
    margin-top: -1px;
  }
  /deep/.el-table .editable-header-cell-class {
    background: #fff;
    border-right: 1px solid #b16666;
    border-bottom: 1px solid #b16666;
    height: 30px;
    text-align: center;
    padding: 0 !important;
  }
  /deep/.el-table__row.editable-row-class {
    background-color: #fff;
    height: 30px;
  }
  .el-table {
    border: 1px solid #b16666;
    width: auto;
  }
  .invoice-footer-value {
    text-align: center;
  }
  /deep/.invoice-footer-value > .el-divider.el-divider--horizontal {
    margin: 2px 0;
    background-color: #c8c8c8;
  }
  /deep/.invoice-view-left {
    text-align: right;
  }
  /deep/.invoice-color-red {
    color: #b16666;
  }
}
</style>
